<template>
  <div>
    <el-container>
      <el-header>
        <div class="Left">
          <img src="../../assets//img/logo.png" alt="" />
          <h3>招标与采购网后台</h3>
        </div>
        <div class="Right">
          <p>
            <img
              style="width: 26px; height: 28px"
              src="../../assets/img/6.png"
              alt=""
            />
          </p>
          <p>
            <img
              style="width: 36px; height: 36px"
              src="../../assets/img/1.png"
              alt=""
            />
          </p>
          <p class="name">初学者YGL</p>
          <p>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img
                  src="../../assets/img/5.png"
                  alt=""
                  style="
                    width: 12px;
                    height: 8px;
                    margin-top: 10px;
                    padding-right: 20px;
                  "
                />
                <!-- <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon> -->
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>退出 </el-dropdown-item>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </p>
        </div>
      </el-header>

      <el-container>
        <el-aside :width="isCollapse ? '150px' : '65px'">
          <span style="color: #fff; margin-left: 25px" @click="fold()">
            <el-icon v-model="isCollapse"><Grid /></el-icon>
          </span>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            router
            style="background: transparent"
            text-color="#A9B1BE"
            active-text-color="#fff"
            :unique-opened="true"
            :collapse="!isCollapse"
            :collapse-transition="false"
          >
            <el-sub-menu style="background: transparent">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/12.png" alt="" />
                </el-icon>
                <span>子站域名</span>
              </template>
              <el-menu-item index="/SubstationName">子站域名</el-menu-item>
            </el-sub-menu>

            <!-- 个人中心 -->
            <el-sub-menu index="/userBasicinformation">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/32.png" alt="" />
                </el-icon>
                <span>个人中心</span>
              </template>

              <el-menu-item index="/userLicense">营业执照上传</el-menu-item>
              <el-menu-item index="/userBasicinformation">
                公司基本信息
              </el-menu-item>
              <el-menu-item index="/userContacts">联系人信息</el-menu-item>
              <el-menu-item index="/userCertificate">资质证书上传</el-menu-item>
            </el-sub-menu>

            <!-- 商品管理 -->
            <el-sub-menu index="/commodity">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/31.png" alt="" />
                </el-icon>
                <span>商品管理</span>
              </template>

              <el-menu-item index="/commodityList">商品列表</el-menu-item>
              <el-menu-item index="/commoditySort"> 商品分类管理 </el-menu-item>
              <el-menu-item index="/commodityTop">商品置顶记录</el-menu-item>
            </el-sub-menu>

            <!-- 采购管理 -->
            <el-sub-menu index="/procure">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/33.png" alt="" />
                </el-icon>
                <span>采购管理</span>
              </template>

              <el-menu-item index="/procureTab">采购单列表</el-menu-item>

              <el-menu-item index="/procureTopRecord"
                >采购单置顶记录</el-menu-item
              >
            </el-sub-menu>

            <!-- 报价管理 -->
            <el-sub-menu index="/quotation">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/2.png" alt="" />
                </el-icon>
                <span>报价管理</span>
              </template>

              <el-menu-item index="/quotationOrder">报价单</el-menu-item>

              <el-menu-item index="/quotationTopof"
                >报价单置顶记录</el-menu-item
              >
            </el-sub-menu>

            <!-- 咨询管理 -->

            <el-sub-menu index="/consult">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/30.png" alt="" />
                </el-icon>
                <span>咨询管理</span>
              </template>

              <el-menu-item index="/consultOne">咨询单</el-menu-item>

              <el-menu-item index="/consultTopping"
                >咨询单置顶记录</el-menu-item
              >
            </el-sub-menu>

            <!-- 意向管理 -->
            <el-sub-menu index="/intention">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/34.png" alt="" />
                </el-icon>
                <span>意向管理</span>
              </template>

              <el-menu-item index="/intentionManage">意向单</el-menu-item>
            </el-sub-menu>

            <!-- 网站管理 -->
            <el-sub-menu index="/website">
              <template #title>
                <el-icon>
                  <img class="menu_img" src="../../assets/img/29.png" alt="" />
                </el-icon>
                <span>网站管理</span>
              </template>

              <el-menu-item index="/websiteHome">首页</el-menu-item>
              <el-menu-item index="/websiteAlbum">公司相册</el-menu-item>
              <el-menu-item index="/websiteNotice">公司公告</el-menu-item>
              <el-menu-item index="/websiteTopping">公司置顶记录</el-menu-item>
              <el-menu-item index="/websiteVideo">公司视频</el-menu-item>
              <el-menu-item index="/websitePhone">联系方式</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, defineComponent } from "vue";

const isCollapse = ref(true);

// 折叠菜单
const fold = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss">
.el-header {
  // width: 1920px;
  background-color: #b3c0d1;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url(../../assets/img/barcund.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;

  .Left {
    display: flex;
    align-items: center;

    h3 {
      width: 220px;
      height: 22px;
      font-size: 22px;
      color: #ffffff;
    }

    img {
      width: 130px;
      height: 50px;
      margin-right: 10px;
    }
  }

  .Right {
    display: flex;
    align-items: center;

    p {
      img {
        width: 36px;
        height: 36px;
        margin: 0 10px;
      }
    }

    .name {
      width: 106px;
      height: 16px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

.el-aside {
  // width: 150px;
  height: 1079px;
  background-color: #1c294c;
  color: #333;
  height: calc(100vh - 80px);
  background-image: url(../../assets/img/ce.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // font-style: 14px !important;
}

.el-main {
  background-color: #eef0f6;
  color: #333;
  // width: calc(100vw - 80px);
  height: calc(100vh - 80px);
  padding: 0 !important;
}

.el-menu-item {
  background-color: #1c294c;
  color: #a9b1be;
}

.el-menu-item:hover {
  background: url(../../assets/img/10.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #5992ff !important;
  color: #fff;
}

.el-submenu__title:hover {
  background-color: rgb(3, 19, 33) !important;
}

.el-menu {
  border-right: none;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-menu:not(.el-menu--collapse) .el-sub-menu__title:hover {
  background: url(../../assets/img/10.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 10px;
  box-sizing: border-box;
  // background-color: #5992ff;
  color: #fff;
}

// icon
.menu_img {
  width: 14px;
  height: 14px;
}
</style>
